<template>
  <div>
    <div v-if="!roleInfo.roleId" v-loading="Loading" class="noData">
      <div class="leftBox">
        <div class="title"> 什么是角色？</div>
        <div class="text">角色指团队成员的专业分工类别，可由1位或多位成员组成，如人事、行政、财务等。</div>
        <div class="text">目前，“角色”仅运用于业务用户的授权。</div>
        <div class="text">在创建角色时，需设置角色基本信息、功能权限和数据范围。如此，通过角色与资源绑定，用户与角色绑定，达到给用户授权的目的。</div>
      </div>
      <el-image style="width: 400px;" :src="require('@/framework/assets/role-image.png')" />
    </div>
    <div v-else class="hasData">
      <div class="roleName">{{ roleInfo.roleName }}</div>
      <div class="roleRemark">{{ roleInfo.remark }}</div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色详情" name="first"><role-detail ref="roleDetailRef" :role-info="roleInfo" @getRoleList="getRoleList" /></el-tab-pane>
        <el-tab-pane label="授权用户" name="second"><assign-user ref="assignUserRef" :role-info="roleInfo" /></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import assignUser from './assignUser.vue'
import roleDetail from './roleDetail.vue'
import { userDetail } from '@/framework/api/authCenter/bussinessRoleManage'

export default {
  name: 'RightDetailList',
  components: {
    roleDetail,
    assignUser
  },
  props: {
    roleId: {
      type: String,
      default: ''
    }
  },
  dicts: [],
  data() {
    return {
      Loading: true,
      activeName: 'first',
      roleInfo: {
        roleId: '',
        roleName: '',
        roleCode: '',
        roleType: '',
        appCode: '',
        remark: '',
        dataScopeType: '',
        grantOrgScopeIds: '',
        createUser: '',
        createTime: '',
        updateTime: '',
        updateUser: ''
      }
    }
  },
  watch: {
    roleId(newValue, oldValue) {
      if (newValue) {
        this.getBaseInfo(newValue)
      } else {
        this.roleInfo = {}
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.Loading = false
    }, 1000)
  },
  methods: {
    getBaseInfo(roleId) {
      userDetail({ roleId }).then((res) => {
        this.roleInfo = res.data
        this.Loading = false
      })
    },
    getRoleList(data) {
      this.$emit('getRoleList', data)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__item {
  padding: 0 10px;
}
.noData{
  display: flex;
  align-items: center;
  margin: 13% 16% 15% 10%;
  .leftBox{
    margin-right: 80px;
    .title{
    color: #131414;
    font-size: 36px;
    font-family: PingFang SC-中黑体, PingFang SC;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    margin-left: 23px;
    margin-bottom: 32px;
  }
  .text{
    width: 433px;
    margin-left: 24px;
    margin-top: 14px;
    font-weight: normal;
    color: #606266;
    font-size: 14px;
    display:list-item !Important;
    list-style-type: disc !Important;
  }
  }

}
.hasData{
  .roleName{
    font-size: 20px;
    font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
    font-weight: 500;
    color: #131414;
    height: 28px;
    line-height: 28px;
  }
  .roleRemark{
    height: 24px;
    font-size: 14px;
    font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
    font-weight: 400;
    color: #131414;
    line-height: 24px;
  }
}
.el-tabs{
  margin-top: 16px;
}
</style>
